<template>
    <div class="table-panel">
        <div class="panel-title" v-if="$slots.title || $slots.buttons">
            <div class="title">
                <i class="el-icon-fa-table" />
                <slot name="title"></slot>
            </div>
            <div class="toolbar">
                <slot name="buttons"></slot>
            </div>
        </div>
        <slot name="table"></slot>
        <pagination ref="pagination" @change="handleChange" :defaultPageSize="defaultPageSize" v-if="pagination" />
    </div>
</template>

<script>
import pagination from '@/components/pagination'
export default {
    props: {
        pagination: {
            type: Boolean,
            default: true,
        },
        defaultPageSize: {
            type: Number,
            default: 20,
        },
        showSummary: Boolean,
    },
    data() {
        return {
            total: 0,
        }
    },
    components: {
        pagination,
    },
    computed: {
        currentPage: function () {
            if (this.$refs.pagination) {
                return this.$refs.pagination.currentPage
            }
        },
        pageSize: function () {
            if (this.$refs.pagination) {
                return this.$refs.pagination.pageSize
            }
        },
    },
    watch: {
        total: function (val) {
            this.$refs.pagination.total = val
        },
    },
    methods: {
        handleChange: function () {
            this.$emit('page-change', {
                pageNum: this.currentPage - 1,
                pageSize: this.pageSize,
            })
        },
        setPagination: function ({ pageNum, total }) {
            if (pageNum != undefined) {
                this.$refs.pagination.currentPage = (pageNum || 0) + 1
            }
            if (total != undefined) {
                this.$refs.pagination.total = total
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.toolbar {
    .fixed {
        margin-left: 10px;
    }

    .search {
        margin-right: 10px;
    }

    .el-input,
    .el-select {
        width: 120px;
        margin-right: 10px;
    }

    .el-input--mini /deep/ .el-input__inner {
        height: 24px;
    }

    .el-select--mini /deep/ .el-input__inner {
        height: 24px;
    }

    .el-select--mini /deep/ .el-input__icon {
        line-height: 24px;
    }
}
</style>
